<template>
	<view>
		<view class="bigbox">
			<view class="fot1">补充材料</view>
			<view class="box1">
				<view>
					<view class="fot3">基础信息（必填）</view>
				</view>
				<!-- <view class="g_fot1">订单编号：HC2020030001</view> -->
			</view>
			<view class="s_box">
				<image class="xing" src="../../static/59.png" mode=""></image>
				<text>请拍照/上传补充材料</text>
			</view>
			<view class="img_box">
				<view class="img_box1" @click="uploading(1)">
					<image :src="liebiao.query21" mode=""></image>
					<view>过户后的行驶证正面</view>
				</view>
				<view class="img_box1" @click="uploading(2)">
					<image :src="liebiao.query22" mode=""></image>
					<view>过户后的行驶证背面</view>
				</view>
				<view class="img_box1" @click="uploading(3)">
					<image :src="liebiao.query23" mode=""></image>
					<view>上传过户后登记证1、2页</view>
				</view>
				<view class="img_box1" @click="uploading(4)">
					<image :src="liebiao.query24" mode=""></image>
					<view>上传过户后登记证3、4页</view>
				</view>
				<view class="img_box1" @click="uploading(5)">
					<image :src="liebiao.query25" mode=""></image>
					<view>公户需提供营业执照</view>
				</view>
				<view class="img_box1" @click="uploading(6)">
					<image :src="liebiao.query26" mode=""></image>
					<view>商业保险保单</view>
				</view>
				<view class="img_box1" @click="uploading(9)">
					<image :src="liebiao.query31" mode=""></image>
					<view>发票</view>
				</view>
			</view>
			<view class="g_box1">
				<view class="s_box">
					<image class="xing" src="../../static/59.png" mode=""></image>
					<text>请填写打款单</text>
				</view>
				<view class="g_box2">
					<picker @change="bindPickerChange" :value="index" :range="list" class="xl">
						<view class="uni-input">{{list[index]}}</view>
					</picker>
					<image src="../../static/81.png" mode=""></image>
				</view>
				<view class="add_btn" @click="add()">新增</view>
			</view>
			<view class="box2">
				<view>账号</view>
				<input v-model="liebiao.query03" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>开户行</view>
				<input v-model="liebiao.query04" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>开户名</view>
				<input v-model="liebiao.query05" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>贷款金额</view>
				<input v-model="liebiao.query06" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>GPS</view>
				<input v-model="liebiao.query07" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>商业险</view>
				<input v-model="liebiao.query08" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>贷款本金</view>
				<input v-model="liebiao.query09" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>服务费</view>
				<input v-model="liebiao.query10" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>合计打款金额</view>
				<input v-model="liebiao.query11" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>车贷返点</view>
				<input v-model="liebiao.query12" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>保险返点</view>
				<input v-model="liebiao.query13" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>银行合同金额</view>
				<input v-model="liebiao.query14" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>保险公司</view>
				<input v-model="liebiao.query15" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>计算保证保险金额</view>
				<input v-model="liebiao.query16" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>保险保证费</view>
				<input v-model="liebiao.query17" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>备注</view>
				<input v-model="liebiao.query18" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>状态</view>
				<input v-model="liebiao.query19" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>附件</view>
				<input v-model="liebiao.query20" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>车型</view>
				<input v-model="liebiao.query27" type="text" placeholder="请输入">
			</view>
			<view class="box2">
				<view>客户</view>
				<input v-model="liebiao.query28" type="text" placeholder="请输入">
			</view>
			<!-- <view class="s_box">
				<image class="xing" src="../../static/59.png" mode=""></image>
				<text>请拍照/上传转款凭证（可后补）</text>
			</view>
			<view class="img_box">
				<view class="img_box1" @click="uploading(7)">
					<image :src="liebiao.query29==null?'../../static/80.png':liebiao.query29" mode=""></image>
					<view>转款凭证</view>
				</view>
				<view class="img_box1" @click="uploading(8)">
					<image :src="liebiao.query30==null?'../../static/80.png':liebiao.query30" mode=""></image>
					<view>转款凭证</view>
				</view>
			</view> -->
			<view class="all_btn btn_all" @click="tj()">提交申请</view>
			<!-- <view class="box3">
				<view class="box3_1" @click="tz()">保存记录</view>
				<view class="box3_2" @click="tz(2)">放款审核</view>
			</view> -->
		</view>
		<tanchuang v-if="tc_tijiao" 
		 @tcnr="tanchuaung_nr"
		 @tcgb="tanchuaung_gb"></tanchuang>
	</view>
</template>

<script>
	import tanchuang from '../../component/tanchuang.vue'
	export default {
		data() {
			return {
				tc_tijiao:false,
				page_dat:[],
				liebiao:{
					query01:'',
					query02:'',
					query03:'',
					query04:'',
					query05:'',
					query06:'',
					query07:'',
					query08:'',
					query09:'',
					query10:'',
					query11:'',
					query12:'',
					query13:'',
					query14:'',
					query15:'',
					query16:'',
					query17:'',
					query18:'',
					query19:'',
					query20:'',
					query21:'../../static/80.png',
					query22:'../../static/80.png',
					query23:'../../static/80.png',
					query24:'../../static/80.png',
					query25:'../../static/80.png',
					query26:'../../static/80.png',
					query27:'',
					query28:'',
					query29:'../../static/80.png',
					query30:'../../static/80.png',
					query31:'../../static/80.png',
				},
				status:0,
				list: [],
				list1: [],
				index: 0,
				id:''
			}
		},
		onLoad:function(option){
			this.id = option.id
			this.initial()
		},
		components:{tanchuang},
		methods: {
			tj:function(){
				this.tijiao()
				this.tc_tijiao = true
			},
			tanchuaung_gb:function(data){
				this.tc_tijiao = false;
			},
			tanchuaung_nr:function(data){
				console.log(1111)
				this.$post('buse/fxjBuse_02/addFxjBuseitem_09',{
					rid:this.id,
					query02:data.spjg,
					query03:data.spyj,
					query05:data.nbyj
				}).then((res)=>{
					console.log(res.data,7777)
					if(res.data.success){
						uni.showToast({
							title:'提交成功',
							icon:'none'
						})
						setTimeout(()=>{
							uni.navigateBack({
							    delta: 1
							});
						},1000)
					}else if(!res.data.success){
						uni.showToast({
							title: res.data.message,
							icon:'none'
						})
					}
				})
			},
			uploading:function(index){
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
						this.img = tempFilePaths[0]
				        uni.uploadFile({
				            url: this.$headUrl + 'sys/common/upload',
				            filePath: tempFilePaths[0],
				            name: 'file',
							header:{
								'X-Access-Token': uni.getStorageSync('token')
							},
				            success: (res) => {
								console.log(JSON.parse(res.data))
								if(JSON.parse(res.data).success){
									if(index == 1){
										this.liebiao.query21 = JSON.parse(res.data).message
									}else if(index == 2){
										this.liebiao.query22 = JSON.parse(res.data).message
									}else if(index == 3){
										this.liebiao.query23 = JSON.parse(res.data).message
									}else if(index == 4){
										this.liebiao.query24 = JSON.parse(res.data).message
									}else if(index == 5){
										this.liebiao.query25 = JSON.parse(res.data).message
									}else if(index == 6){
										this.liebiao.query26 = JSON.parse(res.data).message
									}else if(index == 7){
										this.liebiao.query29 = JSON.parse(res.data).message
									}else if(index == 8){
										this.liebiao.query30 = JSON.parse(res.data).message
									}else if(index == 9){
										this.liebiao.query31 = JSON.parse(res.data).message
									}
								}
								
				            }
				        });
				    }
				});
			},
			add:function(){
				uni.navigateTo({
					url:'../ADD_chehang/ADD_chehang?id=' + this.id
				})
			},
			bindPickerChange: function(e) {
				console.log('picker发送选择改变，携带值为', e.target.value)
				this.index = e.target.value
			},
			tijiao:function(){
				let name
				let bianhao
				let t21 = ''
				let t22 = ''
				let t23 = ''
				let t24 = ''
				let t25 = ''
				let t26 = ''
				let t29 = ''
				let t30 = ''
				let t31 = ''
				console.log(this.list[this.index])
				this.list1.forEach((item)=>{
					if(item.query05 == this.list[this.index]){
						console.log(item)
						name = item.query05
						bianhao = item.id
					}
				})
				if(this.liebiao.query21 != '../../static/80.png'){t21 = this.liebiao.query21}
				if(this.liebiao.query22 != '../../static/80.png'){t22 = this.liebiao.query22}
				if(this.liebiao.query23 != '../../static/80.png'){t23 = this.liebiao.query23}
				if(this.liebiao.query24 != '../../static/80.png'){t24 = this.liebiao.query24}
				if(this.liebiao.query25 != '../../static/80.png'){t25 = this.liebiao.query25}
				if(this.liebiao.query26 != '../../static/80.png'){t26 = this.liebiao.query26}
				if(this.liebiao.query31 != '../../static/80.png'){t31 = this.liebiao.query31}
				this.$post('buse/fxjBuse_02/addFxjBuseitem_07',{
					rid:this.id,
					id:this.liebiao.id,
					query01:name,
					query02:bianhao,
					query03:this.liebiao.query03,
					query04:this.liebiao.query04,
					query05:this.liebiao.query05,
					query06:this.liebiao.query06,
					query07:this.liebiao.query07,
					query08:this.liebiao.query08,
					query09:this.liebiao.query09,
					query10:this.liebiao.query10,
					query11:this.liebiao.query11,
					query12:this.liebiao.query12,
					query13:this.liebiao.query13,
					query14:this.liebiao.query14,
					query15:this.liebiao.query15,
					query16:this.liebiao.query16,
					query17:this.liebiao.query17,
					query18:this.liebiao.query18,
					query19:this.liebiao.query19,
					query20:this.liebiao.query20,
					query21:t21,
					query22:t22,
					query23:t23,
					query24:t24,
					query25:t25,
					query26:t26,
					query27:this.liebiao.query27,
					query28:this.liebiao.query28,
					query29:t29,
					query30:t30,
					query31:t31,
				}).then((res)=>{
					if(res.data.success){
						// uni.showToast({
						// 	title:'提交成功',
						// 	icon:'none'
						// })
						// setTimeout(()=>{
						// 	uni.navigateBack({
						// 	    delta: 1
						// 	});
						// },1000)
					}
				})
			},
			orcStatus:function(e){
				this.status = e
			},
			ocr:function(){
				this.status = 1
			},
			initial:function(){
				this.$get('buse/fxjBuse_02/listFxjBuseitem_07ByMainId',{
					rid:this.id
				}).then((res)=>{
					console.log(res.data.result.records[0])
					if(res.data.result.records[0] != undefined){
						this.liebiao = res.data.result.records[0]
						if(this.liebiao.query21 == ''){this.liebiao.query21 = '../../static/80.png'}
						if(this.liebiao.query22 == ''){this.liebiao.query22 = '../../static/80.png'}
						if(this.liebiao.query23 == ''){this.liebiao.query23 = '../../static/80.png'}
						if(this.liebiao.query24 == ''){this.liebiao.query24 = '../../static/80.png'}
						if(this.liebiao.query25 == ''){this.liebiao.query25 = '../../static/80.png'}
						if(this.liebiao.query26 == ''){this.liebiao.query26 = '../../static/80.png'}
						if(this.liebiao.query31 == ''){this.liebiao.query31 = '../../static/80.png'}
					}
					console.log(res.data.result.records[0],555555)
				})
				this.$get('base/fxjBase_11/list').then((res)=>{//请填写打款单
					console.log(res.data.result.records)
					this.list1 = res.data.result.records
					res.data.result.records.forEach((item)=>{
						console.log(item.query05)
						this.list.push(item.query05)
					})
					console.log(this.list,33333)
				})
			}
		}
	}
</script>

<style>
	.btn_all{
		margin: 20rpx 0;
	}
	.add_btn{
		height: 54rpx;
		border: 1px solid rgba(5, 106, 255, 1);
		border-radius: 10rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: rgba(5, 106, 255, 1);
		padding: 0rpx 20rpx;
		box-sizing: border-box;
	}
	.xl{
		width: 100%;
	}
	.g_box2>image{
		width: 25rpx;
		height: 25rpx;
		position: absolute;
		top: 15rpx;
		right: 30rpx;
	}
	.g_box2{
		margin-left: 20rpx;
		width: 250rpx;
		height: 54rpx;
		color: rgba(0, 0, 0, 1);
		font-size: 20rpx;
		font-family: Microsoft Yahei;
		border: 1px solid #666666;
		border-radius: 15rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.g_box1{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.btn_all{
		margin-bottom: 30rpx;
	}
	.xing{
		width: 15rpx;
		height: 15rpx;
		margin-right: 10rpx;
	}
	.img_box1>image{
		width: 100%;
		height: 220rpx;
	}
	.img_box1>view{
		margin-top: 14rpx;
		margin-bottom: 30rpx;
		white-space: nowrap;
	}
	.img_box1{
		width: 48%;
		text-align: center;
		font-size:28rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
	}
	.img_box{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.s_box{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin: 30rpx 0;
		
	}
	.g_fot1{
		color: rgba(5, 106, 255, 1);
		font-size: 24rpx;
		font-family: PingFangSC-regular;
	}
	.box3_2{
		background:rgba(66,134,245,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,255,255,1);
		border:1px solid rgba(66,134,245,1);
	}
	.box3_1{
		border:1px solid rgba(66,134,245,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(66,134,245,1);
	}
	.box3>view{
		width: 48%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		
	}
	.box3{
		height: 98rpx;
		display: flex;
		justify-content: space-between;
		align-items: auto;
		margin: 40rpx 0;
	}
	.box2>input{
		text-align: right;
		font-size:30rpx;
	}
	.box2{
		height:88rpx;
		background:rgba(250,250,250,0.3);
		border:1px solid rgba(230,230,230,1);
		border-radius:10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(0,0,0,1);
		margin-top: 20rpx;
	}
	.zxj>image{
		width: 100%;
		height: 100%;
	}
	.zxj{
		width: 37rpx;
		height: 32rpx;
	}
	.fot3{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(244,48,48,1);
	}
	.fot2{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(153,153,153,1);
		margin-bottom: 19rpx;
	}
	.box1{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fot1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
		margin-bottom: 13rpx;
	}
	.bigbox{
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
